<template>
  <div class="map-index">
    <div id="map"></div>
  </div>
</template>

<script>
import {accessToken, mapStyle, mapCerter, mapZoom, mapBearing, mapPitch} from "@/consts/MapConfigConst"
import {onMounted, toRefs, toRef} from "vue"

export default {
  name: "Mapbox",

  props: {
    mapOnLoadCB: {
      required: false,
      type: Function,
      default: () => {
      }
    }
  },

  setup(props) {

    onMounted(() => {
      mapboxgl.accessToken = accessToken;

      let map = new mapboxgl.Map({
        container: "map",
        style: mapStyle["streets-v11"],
        center: mapCerter,
        zoom: mapZoom,
        bearing: mapBearing,
        pitch: mapPitch,
      });

      map.addControl(new MapboxLanguage({
        defaultLanguage: "zh-Hans", // zh-Hant
      }));

      map.on("load", function () {
        props.mapOnLoadCB(map);
      });
    });

    return {}
  }
}
</script>

<style scoped lang="scss">
.map-index {
  width: 100%;
  height: 100%;
  position: relative;

  #map {
    width: 100%;
    height: 100%;

    :deep(.mapboxgl-control-container) {
      .mapboxgl-ctrl-bottom-left, .mapboxgl-ctrl-bottom-right {
        display: none;
      }
    }
  }
}
</style>